<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="../vue.js"></script>
    <style>
        table{
            width: 400px;
            line-height: 33px;
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
        thead{
            background-color: rgb(28, 122, 216);
            color: #fff;
        }
        th, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app">
        <table action="">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, i) in arr">
                    <td>{{item.id}}</td>
                    <td>{{item.brand}}</td>
                    <td>{{item.time}}</td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
                <tr v-if="arr.length === 0">
                    <td colspan="4">没有数据咯~</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data:{
                arr:[
                    {id:'1', brand:'奔驰', time:'2020-08-01', handle:'<button @click="del">删除</button>'},
                    {id:'2', brand:'宝马', time:'2020-08-02', handle:'<button @click="del">删除</button>'},                   
                    {id:'3', brand:'奥迪', time:'2020-08-03', handle:'<button @click="del">删除</button>'},
                    // [1, '奔驰', 2020-08-01, '<button @click="del">删除</button>'],
                    // [1, '奔驰', 2020-08-01, '<button @click="del">删除</button>']
                ]
            },
            methods:{
                del(i){
                    this.arr.splice(i, 1)
                    // 删除完后 显示 没有数据啦!
                }
            }
        })
    </script>
</body>
</html>